<template>
  <div id="accepConfig">
    <Filters block :form="searchForm" :filterData="filterData" @confirm="changePage(1)"/>
    <div class="container">
      <DataTable rowKey="checkDetailId" :tableData="Data" :btns="btns" :tableColumn="tableColumn" :pageConfig="pageConfig" @refresh="getList">
      </DataTable>
    </div>
    <CommonDialog
      :rows="rows"
      :form="form"
      :wrapperCol="wrapperCol"
      :labelCol="labelCol"
      :title="dialogType === 'add' ? '新增配置' : '编辑配置'"
      :visible="formVisible"
      @hideDialog="hideFormVisible"
      @confirm="confirmHandle()"
    />
  </div>
</template>
<script lang='ts'>
import { Confirm } from '@/decorator';
import { Component, Watch, Vue } from 'vue-property-decorator';

@Component
export default class accepConfig extends Vue {
  wrapperCol:any = {span: 10}
  labelCol:any = {span: 14}
  btns: any[] = [
    {
      label: '新增',
      icon: 'add',
      callback: this.showModel
    }
  ];
  form: any = {
    projectId: undefined,
    projectName: '',
    checkNumRange: '',
    checkRangeType: '',
    sendNumRange: ''

  };
  get rows () {
    return {
      projectId: {
        label: '配置项目',
        el: 'select',
        placeholder: '请选择配置项目',
        options: this.projectList,
        showSearch: true,
        showDisabled: this.dialogType !== 'add',
        rules: [{ required: true, message: '请选择配置项目', trigger: 'blur' }]
      },
      sendNumRange: {
        label: '供方发货数量不可超过采购数量的',
        placeholder: '',
        type: 'input',
        suffix: '%',
        rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      checkNumRange: {
        label: '验收时收数量不可超过供方发货数量的',
        placeholder: '',
        type: 'input',
        suffix: '%',
        rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      checkRangeType: {
        label: '免现场验收物料实收数量偏差类型是',
        placeholder: '',
        el: 'select',
        showSearch: true,
        options: this.devArr,
        rules: [{ required: true, message: '请选择偏差类型', trigger: 'blur' }]
      }
    }
  }
  devArr:any[] = [{
    label: '无偏差',
    value: '0'
  }, {
    label: '1%偏差',
    value: '1'
  }, {
    label: '2%偏差',
    value: '2'
  }]
  projectList:any[] = []
  currentPage:any = 1
  formVisible: boolean = false;
  Data: any[] = []
  tableColumn: any = {
    index: {
      label: '序号',
      width: 120
    },
    projectName: {
      label: '项目名称',
      width: 100
    },
    sendNumRange: {
      label: '供方发货限制',
      width: 100
    },
    checkNumRange: {
      label: '验收实收限制',
      width: 100
    },
    rangeType: {
      label: '免现场偏差配置',
      width: 100
    },
    action: {
          label: '操作',
          width: 120,
          template: [
          {
            tag: 'a',
            text: '编辑',
            callback: this.edShowModel
          }
        ]
    }
  }
  dialogType: string = 'add';
  searchForm: any = {
    projectId: undefined,
    name: ''
  }
  shearchVal:any = ''
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  get filterData () {
    return {
        projectId: {
            label: '项目',
            type: 'select',
            width: 200,
            template: {
              placeholder: '请选择项目',
              clearable: true,
              filterable: true,
              options: this.projectList,
              callback: this.callbackProject,
              search: this.searchProject,
              popupScroll: this.popupScroll
            }
        },
        name: {
            label: '项目名称',
            type: 'input',
            template: {
            placeholder: '请输入项目名称',
            clearable: true
            }
        }
    }
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  callbackProject (val:any) {
    this.shearchVal = val
    this.currentPage = 1
    this.projectList = []
    this.getProjectList()
  }
  searchProject (val:any) {
    this.shearchVal = val
    this.currentPage = 1
    this.projectList = []
    this.getProjectList()
    this.shearchVal = ''
  }
  // 滚动选择框时执行
  popupScroll (e:any) {
    const { scrollHeight, scrollTop, clientHeight } = e.target
      if (Math.floor(scrollHeight - scrollTop) === clientHeight) {
        this.currentPage++
        this.getProjectList()
      }
  }
  // 获取项目列表
  getProjectList () {
    let data = {
      page: this.currentPage,
      size: 100,
      searchValue: this.shearchVal
    }
    this.$api.projectRoleProjectListFetch(data).then((res:any) => {
      res.data.records.map((item:any) => {
          item.label = item.ncProjectName
          item.value = item.ncProjectId + '-' + item.ncProjectName
      })
      let projectList = this.projectList.concat(res.data.records)
      this.projectList = projectList
    }).catch()
  }
  // 获取数据
  getList () {
    let data = {
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize,
      name: this.searchForm.name,
      projectId: this.searchForm.projectId ? this.searchForm.projectId.split('-')[0] : ''
    }
    this.$api.checkSettingCheckValueRangeSettingListFetch(data).then(res => {
      if (res.code == 0) {
          res.data.records.map((item:any, index:any) => {
              item.index = this.pageConfig.pageSize * (this.pageConfig.current - 1) + (index + 1)
              item.rangeType = item.checkRangeType == 0 ? '无偏差' : item.checkRangeType == 1 ? '1%' : '2%'
          })
          this.pageConfig.total = res.data.total
          this.Data = res.data.records
      }
    }).catch()
  }
  // 提交
  confirmHandle () {
    this.projectList.map((item:any) => {
      if (item.value === this.form.projectId) {
          this.form.projectName = item.ncProjectName
          this.form.projectId = item.ncProjectId
      }
    })

    // if(this.form.checkRangeType==1){
    //   this.form.checkRangeType = 0
    // }else if(this.form.checkRangeType==2){
    //   this.form.checkRangeType = 1
    // }else if(this.form.checkRangeType==3){
    //   this.form.checkRangeType = 2
    // }
    if (this.dialogType === 'add') {
      this.$api.checkSettingAddCheckValueRangeSettingFetch(this.form).then(res => {
        if (res.code === 0) {
          this.$message.success('操作成功');
          this.formVisible = false;
          this.hideFormVisible()
          this.getList()
        }
      }).catch(() => {
        // console.log(111)
        // this.form.checkRangeType = 1
      })
    } else {
      this.$api.checkSettingUpdateCheckValueRangeSettingFetch(this.form).then(res => {
        if (res.code === 0) {
          this.$message.success('操作成功');
          this.formVisible = false;
          this.hideFormVisible()
          this.getList()
        }
      }).catch(() => {
        // console.log(111)
        // this.form.checkRangeType = ''
      })
    }
  }
  hideFormVisible () {
    this.formVisible = false;
    this.dialogType = 'add'
    this.form = {
        projectId: undefined,
        projectName: '',
        checkNumRange: '',
        checkRangeType: '',
        sendNumRange: '',
        rangeSettingId: ''
    };
  }
  init () {
      this.getList()
      this.getProjectList()
  }
  showModel () {
    console.log(this.form, '123');

    this.dialogType = 'add'
    this.formVisible = true
  }
  edShowModel (val:any) {
    this.dialogType = 'ed'
    this.formVisible = true
    this.form.projectId = val.projectId + '-' + val.projectName
    this.form.sendNumRange = val.sendNumRange
    this.form.checkNumRange = val.checkNumRange
    this.form.checkRangeType = val.checkRangeType
    this.form.rangeSettingId = val.rangeSettingId
  }
}
</script>
<style lang='scss' scoped></style>
